<template>
  <div class="body">
    <div class="leftBody">
      <Carousel loop autoplay dots="none">
        <CarouselItem>
          <div class="carouselItem">
            <div class="carouselImageItem carouselItem1"/>
            <div class="content">
              <div class="title">经典的后台管理</div>
              <div class="describe">用户、部门、权限、字典、参数，一应俱全</div>
            </div>
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="carouselItem">
            <div class="carouselImageItem carouselItem2"/>
            <div class="content">
              <div class="title">完善的系统功能</div>
              <div class="describe">日志、文档、性能监控，应有尽有</div>
            </div>
          </div>
        </CarouselItem>
        <CarouselItem>
          <div class="carouselItem">
            <div class="carouselImageItem carouselItem3"/>
            <div class="content">
              <div class="title">极致的用户体验</div>
              <div class="describe">漂亮的界面、快捷的操作、自适应的布局、急速的响应,给您舒适的体验</div>
            </div>
          </div>
        </CarouselItem>
      </Carousel>
    </div>
    <div class="rightBody">
      <div class="logo"/>
      <div class="title">XS Tech Cloud</div>
      <div class="describe">基于iview和Springboot的企业级开发框架</div>
      <LoginForm/>
      <div class="copyright">
        <div class="text">Copyright © 2022 XS Tech</div>
      </div>
    </div>
  </div>
</template>

<script>
import {Image} from "view-ui-plus";
import LoginForm from "./LoginForm.vue";

export default {
  name: "Login",
  components: {LoginForm, Image},
  methods: {}
}
</script>

<style lang="less" scoped>
.body {
  height: 100vh;
  width: 100%;

  .leftBody {
    width: 50%;
    height: 100%;
    float: left;
    background-image: url("@/assets/system/login/leftBg.png");

    .carouselItem {
      height: 80vh;
      width: 100%;

      .content {
        color: white;
        text-align: center;

        .title {
          font-size: 2em;
          font-weight: bold;
        }

        .describe {
          margin-top: 20px;
          font-size: 1.2em;
        }
      }

      .carouselImageItem {
        height: 60%;
        width: 60%;
        margin-left: auto;
        margin-right: auto;
        margin-top: 18%;
        background-size: cover;
        background-position-x: center;
        background-position-y: center;
      }

      .carouselItem1 {
        background-image: url("@/assets/system/login/carouse_1.png");
      }

      .carouselItem2 {
        background-image: url("@/assets/system/login/carouse_2.png");
      }

      .carouselItem3 {
        background-image: url("@/assets/system/login/carouse_3.png");
      }

    }
  }

  .rightBody {
    width: 50%;
    height: 100%;
    float: right;

    .logo {
      width: 70px;
      height: 70px;
      background-image: url('/logo.png');
      background-size: cover;
      background-position-x: center;
      background-position-y: center;
      margin-left: auto;
      margin-right: auto;
      margin-top: 20px;
    }

    .title {
      font-weight: bold;
      text-align: center;
      font-size: 2em;
      margin-top: 20px;
      color: black;
      letter-spacing: 2px;
    }

    .describe {
      text-align: center;
      margin-top: 20px;
      margin-bottom: 30px;
      letter-spacing: 2px;
    }

    .copyright {
      position: absolute;
      bottom: 30px;
      width: 50%;

      .text {
        text-align: center;
      }
    }
  }
}
</style>
